<template>
  <div v-if="visible" class="diff-modal">
    <!-- 关闭按钮 -->
    <button class="close-button" @click="closeModal">×</button>

    <!-- 对比框 -->
    <div class="diff-container">
      <code-diff
        :old-string="displayOldText"
        :new-string="displayNewText"
        :context="displayContext"
        :outputFormat="displayOutputFormat"
      />
    </div>

    <!-- 配置框 -->
    <div class="config-form">
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="旧文本 (oldString)">
              <el-input
                v-model="form.oldText"
                type="textarea"
                :rows="6"
                placeholder="请输入旧文本"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新文本 (newString)">
              <el-input
                v-model="form.newText"
                type="textarea"
                :rows="6"
                placeholder="请输入新文本"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上下文行数 (context)">
              <el-input-number
                v-model="form.context"
                :min="1"
                :max="100"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输出格式 (outputFormat)">
                <div>
                    <el-radio v-model="form.outputFormat" label="side-by-side" border>并排显示 (side-by-side)</el-radio>
                    <el-radio v-model="form.outputFormat" label="line-by-line" border>逐行显示 (line-by-line)</el-radio>
                </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="applyConfig">确认</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import CodeDiff from 'vue-code-diff';

export default {
  components: {
    CodeDiff,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        oldText: `function hello() {
  console.log('Hello, world!');
}`,
        newText: `function hello() {
  console.log('Hello, Vue.js!');
}`,
        context: 10,
        outputFormat: 'side-by-side',
      },
      displayOldText: '',
      displayNewText: '',
      displayContext: 10,
      displayOutputFormat: 'side-by-side',
    };
  },
  methods: {
    closeModal() {
      this.$emit('close');
    },
    applyConfig() {
      this.displayOldText = this.form.oldText;
      this.displayNewText = this.form.newText;
      this.displayContext = this.form.context;
      this.displayOutputFormat = this.form.outputFormat;
    },
  },
  mounted() {
    this.applyConfig();
  },
};
</script>

<style scoped>
.diff-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 50px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  z-index: 9999 !important; /* 确保下拉框不会被其他元素遮挡 */
}

.close-button:hover {
  color: #000;
}

.diff-container {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  background: #f9f9f9;
}

.config-form {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-textarea {
  font-family: monospace;
  font-size: 14px;
}

.el-select {
  width: 100%;
}

.custom-select {
  z-index: 9999 !important; /* 确保下拉框不会被其他元素遮挡 */
}
</style>